<template>
  <div class="image">
    <template v-if="data?.length">
      <el-image v-for="(url, key) in data" :key="key" class="image-item" :style="`width: ${width}; height: ${height}`" fit="cover" :src="url" :preview-src-list="data" preview-teleported />
    </template>
    <template v-else>{{ placeholder }}</template>
  </div>
</template>
<script setup>
const props = defineProps({
  data: Array,
  width: { type: String, default: '80px' },
  height: { type: String, default: '80px' },
  placeholder: { type: String, default: '待上传' },
})
</script>
<style lang="scss" scoped>
.image-item {
  margin-right: 12px;
  margin-bottom: 12px;
  border: 1px solid #fafafa;
  background-color: #f4f6f9;
}
</style>
